// @media screen and (min-width: 480px) and (max-width: 767px) {
//   .page {
//     background: url("./assets/images/top_bg.png") no-repeat 0px 0px / 100%;

//     .bg-text {
//       position: absolute;
//       top: 2vw;
//       left: 0;
//       width: 100%;
//       height: 3.7vw;
//       padding: 0 3vw;
//       box-sizing: border-box;
//       display: flex;
//       justify-content: space-between;
//       align-items: center;
//       .bg-text-l {
//         width: 15vw;
//         height: 100%;
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         .bg-texts {
//           width: 280px;
//           font-size: 2vw;
//           color: #6769fb;
//           font-weight: bold;
//         }
//         img {
//           width: 2.7vw;
//           height: 2.7vw;
//         }
//       }
//       .bg-text-r {
//         font-size: 2vw;
//         color: #6769fb;
//         font-weight: bold;
//       }
//     }
//   }

//   .content {
//     width: 95%;
//     display: flex;
//     justify-content: space-between;
//     flex-direction: column;
//     margin-top: 5vw;
//     // align-items: center;
//     .content-l {
//       margin-right: 0vw;
//     }
//   }

//   .header {
//     // margin-top: 5vw;
//     width: 15vw;
//     height: 25vw;
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     flex-direction: column;
//     position: absolute;
//     right: 3vw;
//     top: 10vw;
//     .addNode,
//     .deleteNode,
//     .editNode,
//     .resetNode {
//       width: 15vw;
//       height: 7vw;
//       border-radius: 0.8vw;
//       padding-left: 0.8vw;
//       box-sizing: border-box;
//       display: flex;
//       justify-content: space-around;
//       align-items: center;
//       margin-left: 0vw;
//     }

//     .header-text {
//       font-size: 2.5vw;
//     }

//     .header-ioc {
//       width: 3vw;
//       height: 3vw;
//     }
//   }

//   .body {
//     width: 65vw;
//     height: 45vw;
//     margin-top: 2vw;
//     margin: 2vw 0 0 5vw;
//     position: relative;
//     .client-item {
//       width: 11vw;
//       height: 11vw;
//       padding: 1.5vw 0;

//       .mask {
//         width: 11vw;
//         height: 11vw;
//       }

//       .delete_btn {
//         position: absolute;
//         top: calc(50% - 2.5vw);
//         left: calc(50% - 2.5vw);
//         width: 5vw;
//         height: 5vw;
//         background: white;
//         text-align: center;
//         line-height: 8vw;
//         border-radius: 50%;
//         z-index: 99;
//       }

//       .topic-pupop {
//         position: absolute;
//         top: -1vw;
//         left: 9vw;
//         width: 14vw;
//         height: 10.5vw;
//         border-radius: 0.6vw;
//         display: flex;
//         justify-content: space-around;
//         flex-direction: column;
//         align-items: center;

//         .topic-pupop-l {
//           width: 12vw;
//           height: 3.5vw;
//           font-size: 1.8vw;
//           border-radius: 0.3vw;
//         }

//         .topic-pupop-text {
//           font-size: 1.2vw;
//           height: 1.4vw;
//         }
//         .topic-pupop-content {
//           width: 11.5vw;
//           height: 2.5vw;
//           line-height: 2.5vw;
//           font-size: 1.1vw;
//           border-radius: 1vw;
//           .topic-pupop-title {
//             height: 2.5vw;
//             line-height: 2.5vw;
//             font-size: 1.3vw;
//           }

//           .topic-pupop-r {
//             width: 1.5vw;
//             height: 1.5vw;
//             top: 0.4vw;
//           }
//         }
//       }
//     }

//     .withe-radio {
//       width: 10vw;
//       height: 10vw;
//       // background: white;
//       border-radius: 50%;
//       box-sizing: border-box;
//       padding: 0.4vw 0;
//       position: absolute;
//       left: calc(50% - 5vw);
//       top: calc(50% - 5vw);
//       justify-content: space-around;
//       flex-direction: column;
//       align-items: center;
//       .client-up-arrow {
//         width: 4vw;
//         height: 4vw;
//         border-radius: 50%;
//       }

//       .client-descriptionOne,
//       .client-descriptionTwo {
//         color: #43447a;
//         font-size: 1.9vw;
//         font-weight: bold;
//       }
//     }

//     .server-item {
//       width: 14vw;
//       height: 14vw;
//       left: calc(50% - 7vw);
//       top: calc(50% - 7vw);
//       padding: 2.2vw 0;

//       .server-item-title {
//         width: 14vw;
//         height: 3vw;
//         line-height: 3vw;
//         border-radius: 4vw;
//         font-size: 2vw;
//       }
//       .server-item-border {
//         width: 10vw;
//         height: 5vw;
//         padding: 0.2vw 0;
//         border-radius: 4vw;
//         font-size: 1.8vw;
//         font-weight: bold;
//       }
//     }
//   }

//   .content-r {
//     // height: 71vw;
//     margin-left: 0vw;
//     /* 使用vw单位使高度随视口大小变化 */

//     .popup-response {
//       width: 100%;
//       height: 34vw;
//       margin-top: 2.5vw;
//       border-radius: 0.4vw;
//       // background: #f3f4ff;
//       // border: 1px dashed #a97aff;
//       padding: 1vw 1.2vw;
//       box-sizing: border-box;
//       display: flex;
//       justify-content: space-between;
//       align-items: baseline;
//     }

//     .rules {
//       width: 40%;
//       .rule-title {
//         height: 3vw;
//         font-size: 2vw;
//         line-height: 3vw;
//         margin-bottom: 0.3vw;
//       }

//       .rule-title::before {
//         content: "";
//         display: inline-block;
//         width: 1.4vw;
//         height: 1.4vw;
//         margin: 0 1vw;
//         border-radius: 50%;
//         background: #6769fb;
//       }
//       .bg-rule {
//         width: 100%;
//         height: 100%;
//         padding: 1vw 1.1vw 1.2vw 1.1vw;
//         border-radius: 0.8vw;
//       }

//       .title-box {
//         margin-top: 0vw;
//         font-size: 1.5vw;
//         font-weight: bold;

//         .title-request,
//         .title-response {
//           width: 16.4vw;
//           height: 2vw;
//           line-height: 2vw;
//           text-align: center;
//         }
//       }

//       .rule-contentList {
//         margin-top: 0.8vw;
//         .rule-item {
//           margin-top: 0.5vw;
//           font-size: 1.2vw;
//           .item-request,
//           .item-response {
//             width: 16.4vw;
//             height: 3.5vw;
//             line-height: 3.5vw;
//             font-size: 1.8vw;
//           }
//         }
//       }
//     }

//     .message-record {
//       margin-top: 0vw;
//       width: 58.5%;
//       .message-title {
//         height: 3vw;
//         font-size: 2vw;
//         line-height: 3vw;
//         margin-bottom: 0.3vw;
//       }
//       .message-title::before {
//         content: "";
//         display: inline-block;
//         width: 1.4vw;
//         height: 1.4vw;
//         margin: 0 1vw;
//         border-radius: 50%;
//         background: #6769fb;
//       }

//       .bg-message {
//         width: 100%;
//         height: 100%;
//         padding: 1vw 1.1vw 1.2vw 1.1vw;
//         border-radius: 0.8vw;
//         // background: none;

//         // .message-index {
//         //   height: 16vw;
//         //   background: #f5f6f8;
//         //   position: absolute;
//         //   z-index: -10;
//         // }
//         .message-box {
//           margin-top: 0vw;
//           font-size: 1.5vw;
//           font-weight: bold;
//           box-sizing: border-box;
//           padding-right: 3.5vw;

//           .message-title-node {
//             width: 9.5vw;
//             height: 2vw;
//             line-height: 2vw;
//             text-align: center;
//           }
//           .message-title-request,
//           .message-title-response {
//             width: 18vw;
//             height: 2vw;
//             line-height: 2vw;
//             text-align: center;
//           }
//         }
//         .message-contentList {
//           height: 16vw;
//           overflow-y: scroll;
//           overflow-x: hidden; /* 隐藏水平滚动条 */
//           .message-item {
//             margin-top: 0.5vw;
//             font-size: 1.2vw;
//             .message-item-node {
//               width: 9.5vw;
//               height: 3.5vw;
//               line-height: 3.5vw;
//               font-size: 1.8vw;
//             }

//             .message-item-request,
//             .message-item-response {
//               width: 18vw;
//               height: 3.5vw;
//               line-height: 3.5vw;
//               font-size: 1.8vw;
//             }
//           }
//         }
//       }
//     }
//   }
// }
